/* ═══════════════════════════════════════════════════════════
   WHMCS Six — Thème Moderne Clair
   Design: flat, épuré, professionnel, 2024/2025
   Stratégie: override complet via custom.css (chargé en dernier)
   Note: Police Inter chargée dans includes/head.tpl
   ═══════════════════════════════════════════════════════════ */

/* ── VARIABLES ── */
:root {
  --bg:         #f1f5f9;
  --surface:    #ffffff;
  --surface2:   #f8fafc;
  --border:     #e2e8f0;
  --border2:    #cbd5e1;
  --primary:    #015fb9;
  --primary-h:  #0152a3;
  --primary-lt: rgba(1,95,185,.09);
  --primary-xs: rgba(1,95,185,.05);
  --success:    #059669;
  --success-bg: #ecfdf5;
  --success-b:  #6ee7b7;
  --warning:    #d97706;
  --warning-bg: #fffbeb;
  --warning-b:  #fcd34d;
  --danger:     #dc2626;
  --danger-bg:  #fef2f2;
  --danger-b:   #fca5a5;
  --info:       #2563eb;
  --info-bg:    #eff6ff;
  --info-b:     #93c5fd;
  --text:       #0f172a;
  --text2:      #334155;
  --text3:      #64748b;
  --text4:      #94a3b8;
  --r:          10px;
  --rsm:        7px;
  --rlg:        14px;
  --sh-sm:      0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --sh:         0 4px 16px rgba(15,23,42,.06), 0 1px 4px rgba(15,23,42,.04);
  --sh-md:      0 8px 32px rgba(15,23,42,.08), 0 2px 8px rgba(15,23,42,.05);
}

/* ═══ BASE ═══ */
*, *::before, *::after { box-sizing: border-box; }

body, input, button, select, textarea {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 13px !important;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
body { background: white !important; font-size: 13px !important; padding-bottom: 56px !important; }

/* ── Fix Glyphicons Bootstrap Markdown editor ── */
/* Notre override span { font-family: Inter } casse les icônes Glyphicons */
.glyphicon {
    font-family: 'Glyphicons Halflings' !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased;
}
/* Reset aussi sur les boutons de la toolbar markdown */
.btn[data-provider="bootstrap-markdown"] {
    overflow: visible !important;
    padding: 4px 8px !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  letter-spacing: -.3px;
}
a { color: #015fb9 !important; }
a:hover { color: #0152a3 !important; text-decoration: none !important; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }

/* ═══ HEADER ═══ */
section#header {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: var(--sh-sm) !important;
}
section#header .container-fluid { padding: 14px 24px !important; display: flex; align-items: center; }
section#header .logo img { max-height: 110px !important; margin: 10px 0 !important; }
section#header .logo-text {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  color: var(--text) !important;
  letter-spacing: -.5px !important;
}

ul.top-nav > li > a {
  color: var(--text3) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 6px 10px !important;
  border-radius: var(--rsm) !important;
  transition: background .15s, color .15s;
}
ul.top-nav > li > a:hover {
  background: var(--surface2) !important;
  color: var(--text) !important;
}
ul.top-nav > li.primary-action > a.btn {
  background: #015fb9 !important;
  color: #fff !important;
  border-radius: var(--rsm) !important;
  padding: 6px 14px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  border: none !important;
  box-shadow: 0 1px 4px rgba(79,70,229,.3) !important;
}
ul.top-nav > li.primary-action > a.btn:hover {
  background: #0152a3 !important;
  box-shadow: 0 2px 8px rgba(79,70,229,.4) !important;
}

/* ═══ NAVBAR PRINCIPALE ═══ */
section#main-menu { background: var(--surface) !important; border-bottom: 1px solid var(--border) !important; }

.navbar-main {
  background: var(--surface) !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  min-height: 46px !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
}
.navbar-main li.account { background: transparent !important; }
.navbar-main .navbar-nav > li > a {
  color: var(--text3) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 12px 16px !important;
  border-radius: 0 !important;
  transition: color .15s, border-color .15s;
  border-bottom: 2px solid transparent !important;
  position: relative;
}
.navbar-main .navbar-nav > li > a:hover,
.navbar-main .navbar-nav > li > a:focus {
  color: #015fb9 !important;
  background: transparent !important;
  border-bottom-color: #015fb9 !important;
}
.navbar-main .navbar-nav > .active > a,
.navbar-main .navbar-nav > .active > a:hover,
.navbar-main .navbar-nav > .active > a:focus {
  color: #015fb9 !important;
  background: transparent !important;
  border-bottom: 2px solid #015fb9 !important;
  font-weight: 600 !important;
}
.navbar-main .navbar-nav > .open > a,
.navbar-main .navbar-nav > .open > a:hover {
  color: #015fb9 !important;
  background: rgba(1,95,185,.05) !important;
  border-bottom-color: #015fb9 !important;
}
.navbar-main .dropdown-menu {
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--sh-md) !important;
  padding: 6px !important;
  background: var(--surface) !important;
}
.navbar-main .dropdown-menu > li > a {
  color: var(--text2) !important;
  font-size: 13px !important;
  padding: 7px 12px !important;
  border-radius: var(--rsm) !important;
}
.navbar-main .dropdown-menu > li > a:hover,
.navbar-main .navbar-nav .dropdown-menu > li > a:hover,
.navbar-main .navbar-nav .dropdown-menu > li > a:focus,
.navbar-main .dropdown-menu > li > a:focus {
  background: rgba(1,95,185,.09) !important;
  color: #015fb9 !important;
}
.navbar-main .navbar-toggle {
  border: 1px solid var(--border) !important;
  border-radius: var(--rsm) !important;
}
.navbar-main .navbar-toggle .icon-bar { background: var(--text3) !important; }

/* ═══ CONTENU PRINCIPAL ═══ */
section#main-body {
  padding: 28px 0 !important;
  min-height: 500px !important;
}

/* ═══ PANELS ═══ */
.panel {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--rlg) !important;
  box-shadow: var(--sh-sm) !important;
  font-size: 15px !important;
  overflow: visible;
  margin-bottom: 20px;
  transition: box-shadow .2s;
}
.panel:hover { box-shadow: var(--sh) !important; }
.panel-default { border-color: var(--border) !important; }
.panel-default > .panel-heading {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
  padding: 15px 20px !important;
  border-radius: var(--rlg) var(--rlg) 0 0 !important;
}
.panel-default > .panel-heading .panel-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
}
.panel-body { padding: 18px 20px !important; }
.panel-footer {
  background: var(--surface2) !important;
  border-top: 1px solid var(--border) !important;
  padding: 11px 20px !important;
  color: var(--text3) !important;
  font-size: 14px !important;
  border-radius: 0 0 var(--rlg) var(--rlg) !important;
}

/* ═══ TILES (stats accueil) ═══ */
.tiles { margin: 0 0 24px !important; }
.tiles .tile {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-right: none !important;
  padding: 22px 24px !important;
  transition: background .15s;
  position: relative;
  overflow: hidden;
  box-shadow: var(--sh-sm);
}
.tiles .tile:first-child { border-radius: var(--r) 0 0 var(--r) !important; }
.tiles .tile:last-child  { border-right: 1px solid var(--border) !important; border-radius: 0 var(--r) var(--r) 0 !important; }
.tiles .tile:hover       { background: rgba(1,95,185,.05) !important; }
.tiles .tile a           { text-decoration: none !important; display: block; }
.tile .icon { position: absolute !important; top: 14px !important; right: 18px !important; font-size: 28px !important; color: var(--border2) !important; line-height: 1; }
.tile .stat { font-size: 40px !important; font-weight: 700 !important; line-height: 1 !important; color: var(--text) !important; margin-top: 10px !important; letter-spacing: -1.5px; }
.tile .title {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--text3) !important;
  margin-top: 8px !important;
  display: flex;
  align-items: center;
  gap: 5px;
}
.tile-label-icon { font-size: 11px !important; opacity: .6; }
.tile .highlight { height: 3px !important; border-radius: 2px !important; margin-top: 14px !important; }

/* ═══ QUICK ACTIONS ═══ */
.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 24px;
}
.qa-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text2) !important;
  text-decoration: none !important;
  transition: all .16s;
  box-shadow: var(--sh-sm);
  flex: 1 1 auto;
  min-width: 160px;
}
.qa-btn:hover {
  border-color: #015fb9 !important;
  background: rgba(1,95,185,.09) !important;
  color: #015fb9 !important;
  transform: translateY(-1px);
  box-shadow: var(--sh) !important;
}
.qa-icon {
  font-size: 17px !important;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

@media (max-width: 767px) {
  .quick-actions { gap: 8px; }
  .qa-btn { min-width: calc(50% - 8px); font-size: 13px; padding: 10px 14px; }
  .tiles .tile { border-right: 1px solid var(--border) !important; border-bottom: none; }
  .tiles .tile:first-child { border-radius: var(--r) var(--r) 0 0 !important; }
  .tiles .tile:last-child  { border-radius: 0 0 var(--r) var(--r) !important; }
}
.panel.panel-accent-gold    { border-top: 3px solid #f59e0b !important; }
.panel.panel-accent-green   { border-top: 3px solid #10b981 !important; }
.panel.panel-accent-red     { border-top: 3px solid #ef4444 !important; }
.panel.panel-accent-blue    { border-top: 3px solid #3b82f6 !important; }
.panel.panel-accent-orange  { border-top: 3px solid #f97316 !important; }
.panel.panel-accent-purple  { border-top: 3px solid #8b5cf6 !important; }
.panel.panel-accent-teal,
.panel.panel-accent-turquoise { border-top: 3px solid #14b8a6 !important; }
.panel.panel-accent-emerald { border-top: 3px solid #10b981 !important; }
.panel.panel-accent-amethyst { border-top: 3px solid #8b5cf6 !important; }

/* Couleurs highlights modernisées */
.bg-color-blue    { background: #4f46e5 !important; }
.bg-color-green   { background: #10b981 !important; }
.bg-color-red     { background: #ef4444 !important; }
.bg-color-gold    { background: #f59e0b !important; }
.bg-color-orange  { background: #f97316 !important; }
.bg-color-purple  { background: #8b5cf6 !important; }
.bg-color-teal    { background: #14b8a6 !important; }
.bg-color-turquoise { background: #06b6d4 !important; }
.bg-color-emerald { background: #10b981 !important; }

/* ═══ BOUTONS ═══ */
.btn {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  border-radius: var(--rsm) !important;
  padding: 8px 18px !important;
  transition: all .15s !important;
  overflow: visible;
  white-space: normal !important;
  line-height: 1.45 !important;
}
.btn-default {
  background: var(--surface) !important;
  border: 1px solid var(--border2) !important;
  color: var(--text2) !important;
  box-shadow: var(--sh-sm) !important;
}
.btn-default:hover { background: var(--surface2) !important; border-color: var(--border2) !important; color: var(--text) !important; }
.btn-primary, .btn-success {
  background: #015fb9 !important;
  border-color: #015fb9 !important;
  color: #fff !important;
  box-shadow: 0 1px 4px rgba(79,70,229,.3) !important;
}
.btn-primary:hover, .btn-success:hover {
  background: #0152a3 !important;
  border-color: #0152a3 !important;
  box-shadow: 0 2px 8px rgba(79,70,229,.4) !important;
  color: #fff !important;
}
.btn-danger  { background: var(--danger)  !important; border-color: var(--danger)  !important; color: #fff !important; }
.btn-warning { background: var(--warning) !important; border-color: var(--warning) !important; color: #fff !important; }
.btn-info    { background: var(--info)    !important; border-color: var(--info)    !important; color: #fff !important; }
.btn-xs { padding: 4px 10px !important;  font-size: 12px !important;  border-radius: 5px !important; }
.btn-sm { padding: 6px 14px !important;  font-size: 13px !important; }
.btn-lg { padding: 11px 24px !important; font-size: 15px !important;   }

/* ═══ FORMULAIRES ═══ */
.form-control {
  background: var(--surface) !important;
  border: 1px solid var(--border2) !important;
  border-radius: var(--rsm) !important;
  color: var(--text) !important;
  font-size: 14px !important;
  font-family: 'Inter', sans-serif !important;
  height: 40px !important;
  padding: 7px 13px !important;
  transition: border-color .15s, box-shadow .15s !important;
  box-shadow: none !important;
}
.form-control:focus {
  border-color: #015fb9 !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,.12) !important;
  outline: none !important;
}
.form-control::placeholder { color: var(--text4) !important; }
textarea.form-control { height: auto !important; }
.input-group-addon {
  background: var(--surface2) !important;
  border: 1px solid var(--border2) !important;
  border-radius: var(--rsm) !important;
  color: var(--text3) !important;
  font-size: 13px !important;
}
.has-error .form-control   { border-color: var(--danger) !important;  box-shadow: 0 0 0 3px rgba(220,38,38,.1) !important; }
.has-success .form-control { border-color: var(--success) !important; box-shadow: 0 0 0 3px rgba(5,150,105,.1) !important; }
.form-group label { font-weight: 500 !important; font-size: 13px !important; color: var(--text2) !important; margin-bottom: 6px !important; }
.help-block { color: var(--text3) !important; font-size: 12px !important; }
.has-error .help-block, .has-error .control-label { color: var(--danger) !important; }

/* ═══ TABLEAUX — DESIGN MODERNE ═══ */

/* Conteneur */
.table-container {
  padding: 0 !important;
}
.table-container,
.dataTables_wrapper {
  background: #fff !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.06), 0 0 0 1px #eef2f7 !important;
  overflow: hidden !important;
}

/* Table elle-même */
table.table-list,
.table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 0 !important;
}

/* En-têtes */
table.table-list thead th,
.table thead th {
  background: #f8fafc !important;
  border-bottom: 2px solid #e2e8f0 !important;
  border-top: none !important;
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  padding: 12px 16px !important;
  text-align: left !important;
  white-space: nowrap !important;
}

/* DataTables sorting — pas de couleur custom */
.dataTables_wrapper table.table-list thead th { border-bottom: 2px solid #e2e8f0 !important; }
.dataTables_wrapper table.table-list thead th:nth-child(even) { border-bottom: 2px solid #e2e8f0 !important; }

/* Cellules body */
table.table-list tbody td,
.table tbody td {
  background: #fff !important;
  padding: 13px 16px !important;
  vertical-align: middle !important;
  border-bottom: 1px solid #f1f5f9 !important;
  border-top: none !important;
  color: #334155 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* Alternance */
.table-list > tbody > tr:nth-child(even) > td {
  background: #fafbfc !important;
}

/* Hover ligne */
.table-list > tbody > tr:hover > td {
  background: #f5f7ff !important;
  color: #0f172a !important;
  cursor: pointer;
  transition: background .12s !important;
}

/* Dernière ligne : pas de bordure bas */
table.table-list tbody tr:last-child td,
.table tbody tr:last-child td {
  border-bottom: none !important;
}

/* DataTables barre info + filtre */
.dataTables_wrapper .dataTables_info {
  background: #f8fafc !important;
  border: none !important;
  border-top: 1px solid #f1f5f9 !important;
  color: #94a3b8 !important;
  font-size: 12px !important;
  border-radius: 0 !important;
  padding: 11px 16px !important;
}
div.dataTables_wrapper div.dataTables_info { padding: 11px 16px !important; }
.dataTables_wrapper .dataTables_length {
  background: #f8fafc !important;
  color: #64748b !important;
  font-size: 12px !important;
  padding: 10px 16px 0 !important;
}
.dataTables_wrapper .dataTables_filter {
  padding: 8px 16px 0 !important;
}
.dataTables_wrapper .dataTables_filter label .form-control {
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  background: #fff !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  background-image: none !important;
  height: 34px !important;
}
.dataTables_wrapper .dataTables_filter label .form-control:focus {
  border-color: #4f46e5 !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,.1) !important;
}

/* Pagination DataTables */
.dataTables_wrapper .dataTables_paginate {
  padding: 8px 16px !important;
  background: #f8fafc !important;
  border-top: 1px solid #f1f5f9 !important;
}

/* Colonne actions (boutons) */
table.table-list tbody td .btn,
.table tbody td .btn {
  padding: 4px 10px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
  margin: 0 2px !important;
}

/* ═══ PAGINATION ═══ */
.pagination > li > a, .pagination > li > span {
  color: var(--text2) !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  font-size: 12px !important;
  padding: 5px 11px !important;
}
.pagination > li > a:hover { background: rgba(1,95,185,.09) !important; border-color: #015fb9 !important; color: #015fb9 !important; }
.pagination > .active > a, .pagination > .active > a:hover,
.pagination > .active > a:focus, .pagination > .active > span {
  background: #015fb9 !important;
  border-color: #015fb9 !important;
  color: #fff !important;
}
.pagination > li:first-child > a { border-radius: var(--rsm) 0 0 var(--rsm) !important; }
.pagination > li:last-child  > a { border-radius: 0 var(--rsm) var(--rsm) 0 !important; }

/* ═══ ALERTS ═══ */
.alert { border-radius: var(--r) !important; border-width: 1px !important; font-size: 13px !important; padding: 12px 16px !important; }
.alert-success { background: var(--success-bg) !important; border-color: var(--success-b) !important; color: #065f46 !important; }
.alert-warning { background: var(--warning-bg) !important; border-color: var(--warning-b) !important; color: #92400e !important; }
.alert-danger  { background: var(--danger-bg)  !important; border-color: var(--danger-b)  !important; color: #991b1b !important; }
.alert-info    { background: var(--info-bg)    !important; border-color: var(--info-b)    !important; color: #1e40af !important; }
.alert-bordered-left { border-left-width: 4px !important; border-radius: 0 var(--r) var(--r) 0 !important; border-top: none !important; border-right: none !important; border-bottom: none !important; }

/* ═══ LABELS / BADGES ═══ */
.label { border-radius: 5px !important; font-size: 11px !important; font-weight: 600 !important; padding: 3px 8px !important; letter-spacing: .02em !important; }
.label-default { background: #e2e8f0 !important; color: var(--text2) !important; }
.label-primary { background: rgba(1,95,185,.09) !important; color: #015fb9 !important; }
.label-success { background: var(--success-bg) !important; color: var(--success) !important; border: 1px solid var(--success-b); }
.label-warning { background: var(--warning-bg) !important; color: var(--warning) !important; border: 1px solid var(--warning-b); }
.label-danger  { background: var(--danger-bg)  !important; color: var(--danger)  !important; border: 1px solid var(--danger-b); }
.label-info    { background: var(--info-bg)    !important; color: var(--info)    !important; border: 1px solid var(--info-b); }

/* ── Notification : bulle avec compteur ── */
.label.label-info {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 6px !important;
  border-radius: 100px !important;
  background: #2563eb !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border: none !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  letter-spacing: 0 !important;
}

.badge { background: #015fb9 !important; border-radius: 100px !important; font-size: 11px !important; font-weight: 700 !important; padding: 2px 6px !important; }

/* ── Service item : pleine largeur ── */
.div-service-item {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ═══ LIST GROUPS ═══ */
.list-group { border-radius: var(--r) !important; overflow: visible; font-size: 15px !important; padding-left: 4px !important; }
.status-active, .status-open, .status-completed, .status-paid, .status-accepted { color: var(--success) !important; font-weight: 600 !important; }
.status-pending, .status-pending-registration, .status-grace { color: var(--warning) !important; font-weight: 600 !important; }
.status-unpaid, .status-inprogress, .status-collections { color: var(--danger) !important; font-weight: 600 !important; }
.status-suspended, .status-customer-reply { color: #d97706 !important; font-weight: 600 !important; }
.status-terminated, .status-cancelled, .status-closed { color: var(--text4) !important; font-weight: 500 !important; }
.status-answered { color: #015fb9 !important; font-weight: 600 !important; }
.status-expired, .status-transferred-away { color: var(--text3) !important; font-weight: 500 !important; }

/* ═══ LIST GROUPS ═══ */
.list-group { border-radius: var(--r) !important; overflow: visible; font-size: 15px !important; }
.list-group-item { border-color: var(--border) !important; background: var(--surface) !important; padding: 11px 16px !important; color: var(--text2) !important; font-size: 14px !important; transition: background .13s; }
.list-group-item:first-child { border-radius: var(--r) var(--r) 0 0 !important; }
.list-group-item:last-child  { border-radius: 0 0 var(--r) var(--r) !important; }
a.list-group-item:hover { background: var(--surface2) !important; color: var(--text) !important; }
a.list-group-item.active, a.list-group-item.active:hover, a.list-group-item.active:focus {
  border-color: var(--border) !important; color: #015fb9 !important;
}
.list-group-item .badge { background: transparent !important; color: var(--text3) !important; font-weight: 600 !important; }

/* ═══ ONGLETS ═══ */
.nav-tabs { border-bottom: 2px solid var(--border) !important; margin-bottom: 20px !important; }
.nav-tabs > li > a {
  color: var(--text3) !important; font-size: 13px !important; font-weight: 500 !important;
  border: none !important; border-bottom: 2px solid transparent !important;
  padding: 9px 16px !important; border-radius: 0 !important; margin-bottom: -2px !important;
}
.nav-tabs > li > a:hover { color: #015fb9 !important; background: transparent !important; border-bottom-color: #015fb9 !important; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
  color: #015fb9 !important; border: none !important; border-bottom: 2px solid #015fb9 !important;
  background: transparent !important; font-weight: 600 !important;
}

/* ═══ BREADCRUMB ═══ */
.breadcrumb { background: transparent !important; padding: 4px 0 !important; font-size: 12px !important; margin-bottom: 14px !important; }
.breadcrumb li, .breadcrumb li a { color: var(--text3) !important; }
.breadcrumb li a:hover { color: #015fb9 !important; }
.breadcrumb > .active { color: var(--text2) !important; font-weight: 500; }
.breadcrumb > li + li::before { color: var(--text4) !important; }
div.header-lined h1 { border-bottom: 2px solid var(--border) !important; color: var(--text) !important; font-size: 20px !important; padding-bottom: 12px !important; margin-bottom: 18px !important; }
div.header-lined .breadcrumb li a { color: var(--text3) !important; }
div.header-lined .breadcrumb > .active { color: #015fb9 !important; }

/* ═══ LOGIN PAGE ═══ */
.logincontainer { max-width: 440px !important; margin: 48px auto !important; }
.logincontainer .panel { border-radius: var(--rlg) !important; box-shadow: var(--sh-md) !important; border: 1px solid var(--border) !important; }
.logincontainer .panel-heading {
  background: linear-gradient(135deg, #015fb9 0%, #818cf8 100%) !important;
  border-radius: var(--rlg) var(--rlg) 0 0 !important;
  padding: 24px 24px 20px !important;
  border-bottom: none !important;
}
.logincontainer .panel-heading .panel-title { color: #fff !important; font-size: 16px !important; font-weight: 700 !important; text-align: center; }

/* ═══ HOME BANNER ═══ */
section#home-banner {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 55%, #4338ca 100%) !important;
  padding: 52px 0 60px !important;
}
section#home-banner h2 { font-weight: 700 !important; font-size: 29px !important; color: #fff !important; }
section#home-banner .form-control { border-radius: var(--rsm) 0 0 var(--rsm) !important; height: 46px !important; font-size: 14px !important; border: none !important; }
section#home-banner .btn.search { background: #10b981 !important; height: 46px !important; font-weight: 600 !important; }
section#home-banner .btn.transfer { background: rgba(255,255,255,.15) !important; color: #fff !important; height: 46px !important; }

/* ═══ HOME SHORTCUTS ═══ */
.home-shortcuts { background: var(--surface) !important; border-bottom: 1px solid var(--border) !important; margin: 0 !important; }
.home-shortcuts li { border-right-color: var(--border) !important; color: var(--text2) !important; font-size: 12px !important; transition: background .15s; }
.home-shortcuts li:first-child { border-left-color: var(--border) !important; }
.home-shortcuts li:hover { background: rgba(1,95,185,.09) !important; }
.home-shortcuts li a { color: var(--text2) !important; }
.home-shortcuts li:hover a { color: #015fb9 !important; }
.home-shortcuts li i { font-size: 18px !important; color: #015fb9 !important; }
.home-shortcuts li p { text-transform: none !important; font-weight: 500 !important; }

/* ═══ CLIENT HOME PANELS ═══ */
.client-home-panels .panel > .panel-heading { background: var(--surface) !important; border-bottom: 1px solid var(--border) !important; font-weight: 600 !important; padding: 13px 18px !important; }
.client-home-panels .panel > .list-group { border-top: 1px solid var(--border) !important; border-bottom: 1px solid var(--border) !important; }
.client-home-panels .panel > .list-group .list-group-item { padding: 7px 14px !important; font-size: 13px !important; }
.client-home-panels .panel small { color: var(--text3) !important; }

/* ═══ TICKETS ═══ */
.ticket-reply { border: 1px solid var(--border) !important; border-radius: var(--r) !important; background: var(--surface) !important; margin: 12px 0 !important; overflow: hidden; }
.ticket-reply.staff { border-color: var(--info-b) !important; }
.ticket-reply .user { background: var(--surface2) !important; padding: 10px 16px !important; border-bottom: 1px solid var(--border) !important; }
.ticket-reply.staff .user { background: #dbeafe !important; border-bottom-color: var(--info-b) !important; }
.ticket-reply .user .name { font-weight: 600 !important; font-size: 13px !important; color: var(--text) !important; }
.ticket-reply .user .type { font-size: 12px !important; color: var(--text3) !important; font-weight: 500 !important; }
.ticket-reply .message { padding: 14px 18px !important; font-size: 14px !important; color: var(--text2) !important; line-height: 1.7; }
.ticket-reply .date { font-size: 12px !important; color: var(--text3) !important; padding: 8px 16px !important; }
.ticket-reply .attachments { background: var(--surface2) !important; border-top: 1px dashed var(--border) !important; padding: 10px 18px !important; font-size: 12px !important; color: var(--text3) !important; }
.ticket-number { color: #015fb9 !important; font-size: 15px !important; font-style: normal !important; font-family: 'JetBrains Mono', monospace !important; }
.ticket-subject.unread { font-weight: 600 !important; }

/* ═══ PRODUCT STATUS ═══ */
.product-status { border-radius: var(--rsm) !important; margin-bottom: 16px !important; }
.product-status-active    { background: var(--success) !important; }
.product-status-pending   { background: var(--warning) !important; }
.product-status-suspended { background: var(--info)    !important; }
.product-status-terminated, .product-status-cancelled { background: var(--text4) !important; }
.product-status-text { padding: 7px 12px !important; font-weight: 600 !important; font-size: 12px !important; letter-spacing: .05em !important; }
div.product-details-tab-container { border: 1px solid var(--border) !important; border-radius: 0 0 var(--r) var(--r) !important; background: var(--surface) !important; }
div.product-details div.product-icon { background: var(--surface2) !important; border: 1px solid var(--border) !important; border-radius: var(--r) !important; }

/* ═══ NOTIFICATIONS POPOVER ═══ */
.popover-user-notifications { border-radius: var(--r) !important; border-color: var(--border) !important; box-shadow: var(--sh-md) !important; font-family: 'Inter', sans-serif !important; }
.popover-user-notifications ul li { border-bottom-color: var(--border) !important; }
.popover-user-notifications ul li a { color: var(--text2) !important; font-size: 13px !important; border-radius: var(--rsm) !important; }
.popover-user-notifications ul li a:hover { background: var(--surface2) !important; }

/* ═══ CARTE BANCAIRE ═══ */
div.credit-card {
  background: linear-gradient(135deg, #312e81, #4f46e5) !important;
  border: none !important;
  border-radius: 16px !important;
  color: #fff !important;
  box-shadow: var(--sh-md) !important;
}
div.credit-card div.card-number { background: rgba(255,255,255,.12) !important; color: #fff !important; font-family: 'JetBrains Mono', monospace !important; }
div.credit-card div.card-start, div.credit-card div.card-expiry { color: #e0e7ff !important; }

/* ═══ FOOTER ═══ */
section#footer {
  background: var(--surface) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--text3) !important;
  font-size: 12px !important;
  padding: 16px 24px !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 999 !important;
}
section#footer a { color: var(--text3) !important; }
section#footer a:hover { color: #015fb9 !important; }
section#footer .back-to-top i { background: var(--surface2) !important; color: var(--text3) !important; border: 1px solid var(--border) !important; border-radius: var(--rsm) !important; }

/* ═══ MODAL ═══ */
.modal-content { border: 1px solid var(--border) !important; border-radius: var(--rlg) !important; box-shadow: var(--sh-md) !important; font-family: 'Inter', sans-serif !important; }
.modal-header { border-bottom: 1px solid var(--border) !important; padding: 16px 20px !important; background: var(--surface) !important; border-radius: var(--rlg) var(--rlg) 0 0 !important; }
.modal-header .modal-title { font-weight: 600 !important; font-size: 15px !important; color: var(--text) !important; }
.modal-body { padding: 20px !important; }
.modal-footer { border-top: 1px solid var(--border) !important; padding: 14px 20px !important; background: var(--surface2) !important; border-radius: 0 0 var(--rlg) var(--rlg) !important; }

/* ═══ DROPDOWNS ═══ */
.dropdown-menu { border: 1px solid var(--border) !important; border-radius: var(--r) !important; box-shadow: var(--sh-md) !important; padding: 6px !important; background: var(--surface) !important; font-size: 13px !important; }
.dropdown-menu > li > a { color: var(--text2) !important; padding: 7px 12px !important; border-radius: var(--rsm) !important; }
.dropdown-menu > li > a:hover { background: rgba(1,95,185,.09) !important; color: #015fb9 !important; }
.dropdown-menu .divider { background: var(--border) !important; margin: 5px 0 !important; }

/* ═══ DIVERS ═══ */
.well { background: var(--surface2) !important; border: 1px solid var(--border) !important; border-radius: var(--r) !important; box-shadow: none !important; padding: 16px 20px !important; }
hr { border-top-color: var(--border) !important; }
blockquote { border-left: 4px solid #015fb9 !important; background: var(--surface2) !important; border-radius: 0 var(--rsm) var(--rsm) 0 !important; padding: 12px 16px !important; color: var(--text2) !important; }
.text-muted   { color: var(--text3) !important; }
.text-primary { color: #015fb9 !important; }
.text-success { color: var(--success) !important; }
.text-danger  { color: var(--danger)  !important; }
.text-warning { color: var(--warning) !important; }
.text-info    { color: var(--info)    !important; }
.compact-control-bar { background: var(--surface2) !important; border: 1px solid var(--border) !important; border-radius: var(--rsm) !important; }
.checkbox label, .radio label { font-size: 13px !important; color: var(--text2) !important; }

/* ═══ AFFILIATES ═══ */
.affiliate-referral-link span { border-radius: var(--rsm) !important; border-color: var(--border) !important; font-size: 15px !important; background: var(--surface2) !important; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 767px) {
  .navbar-main .navbar-nav > li > a { border-bottom: none !important; padding: 8px 16px !important; }
  .navbar-main .navbar-nav > li > a:hover { background: rgba(1,95,185,.09) !important; }
  .panel { border-radius: var(--r) !important; }
  section#main-body { padding: 14px 0 !important; }
}

/* ═══ TRANSITIONS GLOBALES ═══ */
.btn, .list-group-item, a.list-group-item, .tiles .tile, .dropdown-menu > li > a {
  transition: all .14s ease !important;
}

/* ── Icône panier dans le header ── */
#header-cart-btn > a {
  padding: 6px 10px !important;
  color: #64748b !important;
  font-size: 14px !important;
  transition: color .15s !important;
}
#header-cart-btn > a:hover {
  color: #015fb9 !important;
}

/* Addons masqué sur les pages store produit */
body[data-templatefile="store"] [menuItemName="Addons"],
body[data-templatefile*="store"] [menuItemName="Addons"],
body[data-templatefile*="cart"] [menuItemName="Addons"] {
    display: none !important;
}
.btn:focus, a:focus { outline: none !important; }
.form-control:focus { outline: none !important; }

/* ══════════════════════════════════════════════════════
   ═══ PANNEAUX CLIENT HOME — REFONTE VISUELLE ═══
   Cible les encarts : Vos produits, Factures impayées,
   Dernières demandes de support, etc.
══════════════════════════════════════════════════════ */

/* Grille 2 colonnes pour les panneaux */
.client-home-panels > .row > .col-sm-6 {
  display: flex;
  flex-direction: column;
}

/* ══════════════════════════════════════════════════════
   ═══ PANNEAUX CLIENT HOME — DESIGN PREMIUM ═══
══════════════════════════════════════════════════════ */

/* Grille colonnes */
.client-home-panels > .row > .col-sm-6 {
  display: flex;
  flex-direction: column;
}

/* ── Base panel ── */
.client-home-panels .panel {
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.07), 0 0 0 1px #eef2f7 !important;
  overflow: visible !important;
  margin-bottom: 20px !important;
  background: #fff !important;
  transition: box-shadow .22s ease, transform .18s ease !important;
  flex: 1;
  position: relative;
  /* Coins arrondis via clip-path pour ne pas couper la bande ::before */
  clip-path: none !important;
}
/* Conteneur interne pour clip les items sans couper la barre */
.client-home-panels .panel > .panel-heading,
.client-home-panels .panel > .list-group,
.client-home-panels .panel > .panel-body,
.client-home-panels .panel > .panel-footer {
  overflow: hidden !important;
}
.client-home-panels .panel > .panel-heading {
  border-radius: 0 16px 0 0 !important;
  overflow: hidden !important;
}
.client-home-panels .panel > .panel-footer {
  border-radius: 0 0 16px 0 !important;
  overflow: hidden !important;
}
.client-home-panels .panel:hover {
  box-shadow: 0 10px 32px rgba(15,23,42,.1), 0 0 0 1px #e2e8f0 !important;
  transform: translateY(-1px) !important;
}

/* ── Bande couleur gauche à la place du top ── */
.client-home-panels .panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px;
  height: 100%;
  border-radius: 16px 0 0 16px;
  background: #e2e8f0;
}
.client-home-panels .panel.panel-accent-blue::before   { background: linear-gradient(180deg, #4f46e5, #818cf8); }
.client-home-panels .panel.panel-accent-gold::before,
.client-home-panels .panel.panel-accent-orange::before { background: linear-gradient(180deg, #f59e0b, #fbbf24); }
.client-home-panels .panel.panel-accent-teal::before,
.client-home-panels .panel.panel-accent-green::before  { background: linear-gradient(180deg, #0d9488, #14b8a6); }
.client-home-panels .panel.panel-accent-red::before    { background: linear-gradient(180deg, #dc2626, #ef4444); }

/* Retrait top border précédent */
.client-home-panels .panel.panel-accent-blue,
.client-home-panels .panel.panel-accent-gold,
.client-home-panels .panel.panel-accent-orange,
.client-home-panels .panel.panel-accent-teal,
.client-home-panels .panel.panel-accent-green,
.client-home-panels .panel.panel-accent-red {
  border-top: none !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.07), 0 0 0 1px #eef2f7 !important;
}

/* ── En-tête panel ── */
.client-home-panels .panel > .panel-heading {
  background: #fff !important;
  border-bottom: 1px solid #f1f5f9 !important;
  padding: 18px 20px 14px 24px !important;
  border-radius: 0 16px 0 0 !important;
}
.client-home-panels .panel > .panel-heading .panel-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  letter-spacing: -.25px !important;
}
/* Icône ronde dans le titre */
.client-home-panels .panel > .panel-heading .panel-title i {
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
  background: rgba(79,70,229,.09) !important;
  color: #4f46e5 !important;
}
.client-home-panels .panel.panel-accent-gold > .panel-heading .panel-title i,
.client-home-panels .panel.panel-accent-orange > .panel-heading .panel-title i {
  background: #fffbeb !important; color: #d97706 !important;
}
.client-home-panels .panel.panel-accent-teal > .panel-heading .panel-title i,
.client-home-panels .panel.panel-accent-green > .panel-heading .panel-title i {
  background: #f0fdfa !important; color: #0d9488 !important;
}
.client-home-panels .panel.panel-accent-red > .panel-heading .panel-title i {
  background: #fef2f2 !important; color: #dc2626 !important;
}

/* Bouton "Voir tout" */
.client-home-panels .panel > .panel-heading .btn {
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 4px 11px !important;
  border-radius: 20px !important;
  background: #f1f5f9 !important;
  color: #64748b !important;
  border: none !important;
  box-shadow: none !important;
  transition: all .14s !important;
  letter-spacing: 0 !important;
}
.client-home-panels .panel > .panel-heading .btn:hover {
  background: #4f46e5 !important;
  color: #fff !important;
}

/* ── Items list-group ── */
.client-home-panels .panel > .list-group {
  border: none !important;
  max-height: 350px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  width: 100% !important;
  display: block !important;
}
.client-home-panels .panel > .list-group::-webkit-scrollbar { width: 4px; }
.client-home-panels .panel > .list-group::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 2px; }

.client-home-panels .panel > .list-group .list-group-item {
  border: none !important;
  border-bottom: 1px solid #f8fafc !important;
  padding: 12px 18px 12px 24px !important;
  font-size: 14px !important;
  color: #334155 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  transition: background .13s, padding-left .13s !important;
  position: relative !important;
  text-decoration: none !important;
  flex-wrap: nowrap !important;
}
.client-home-panels .panel > .list-group .list-group-item:last-child {
  border-bottom: none !important;
}
/* Texte principal : prend tout l'espace */
.client-home-panels .panel > .list-group .list-group-item > span:not(.badge):not(.label):not([class*="status"]),
.client-home-panels .panel > .list-group .list-group-item > a:not(.btn) {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
/* Éléments droite : ne rétrécissent pas */
.client-home-panels .panel > .list-group .list-group-item .btn,
.client-home-panels .panel > .list-group .list-group-item .pull-right,
.client-home-panels .panel > .list-group .list-group-item [class*="status"],
.client-home-panels .panel > .list-group .list-group-item .label,
.client-home-panels .panel > .list-group .list-group-item .badge {
  flex-shrink: 0 !important;
  float: none !important;
  margin-left: auto !important;
  white-space: nowrap !important;
}
.client-home-panels .panel > .list-group a.list-group-item:hover {
  background: #f8faff !important;
  padding-left: 28px !important;
  color: #4f46e5 !important;
}
.client-home-panels .panel.panel-accent-gold > .list-group a.list-group-item:hover,
.client-home-panels .panel.panel-accent-orange > .list-group a.list-group-item:hover {
  background: #fffbeb !important; color: #d97706 !important;
}
.client-home-panels .panel.panel-accent-teal > .list-group a.list-group-item:hover,
.client-home-panels .panel.panel-accent-green > .list-group a.list-group-item:hover {
  background: #f0fdfa !important; color: #0d9488 !important;
}

/* Icône dans item */
.client-home-panels .panel > .list-group .list-group-item i.fas,
.client-home-panels .panel > .list-group .list-group-item i.far,
.client-home-panels .panel > .list-group .list-group-item .sidebar-menu-item-icon {
  width: 28px !important; height: 28px !important;
  border-radius: 8px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  font-size: 12px !important; flex-shrink: 0 !important;
  background: rgba(79,70,229,.08) !important; color: #4f46e5 !important;
}
.client-home-panels .panel.panel-accent-gold .list-group-item i,
.client-home-panels .panel.panel-accent-orange .list-group-item i {
  background: #fffbeb !important; color: #d97706 !important;
}
.client-home-panels .panel.panel-accent-teal .list-group-item i,
.client-home-panels .panel.panel-accent-green .list-group-item i {
  background: #f0fdfa !important; color: #0d9488 !important;
}
.client-home-panels .panel.panel-accent-red .list-group-item i {
  background: #fef2f2 !important; color: #dc2626 !important;
}

/* Texte principal dans item */
.client-home-panels .panel > .list-group .list-group-item > span:not(.badge),
.client-home-panels .panel > .list-group .list-group-item > a {
  flex: 1 !important; min-width: 0 !important;
  overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
}

/* Sous-titre / domaine */
.client-home-panels .panel > .list-group .list-group-item .text-domain,
.client-home-panels .panel > .list-group .list-group-item small,
.client-home-panels .panel > .list-group .list-group-item .small {
  font-size: 11px !important; color: #94a3b8 !important;
  display: block !important; margin-top: 2px !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  font-weight: 400 !important;
}

/* Badge */
.client-home-panels .panel > .list-group .list-group-item .badge {
  margin-left: auto !important; flex-shrink: 0 !important;
  background: #4f46e5 !important; border-radius: 100px !important;
  font-size: 11px !important; font-weight: 700 !important;
  padding: 2px 8px !important; min-width: 22px !important; text-align: center !important;
  color: #fff !important;
}

/* ── Statuts pills ── */
.client-home-panels .status-active   { margin-left:auto; flex-shrink:0; font-size:11px !important; font-weight:700 !important; padding:3px 9px !important; border-radius:5px !important; background:#ecfdf5 !important; color:#059669 !important; }
.client-home-panels .status-pending  { margin-left:auto; flex-shrink:0; font-size:11px !important; font-weight:700 !important; padding:3px 9px !important; border-radius:5px !important; background:#fffbeb !important; color:#d97706 !important; }
.client-home-panels .status-unpaid   { margin-left:auto; flex-shrink:0; font-size:11px !important; font-weight:700 !important; padding:3px 9px !important; border-radius:5px !important; background:#fef2f2 !important; color:#dc2626 !important; }
.client-home-panels .status-open     { margin-left:auto; flex-shrink:0; font-size:11px !important; font-weight:700 !important; padding:3px 9px !important; border-radius:5px !important; background:#eff6ff !important; color:#2563eb !important; }
.client-home-panels .status-suspended,
.client-home-panels .status-terminated { margin-left:auto; flex-shrink:0; font-size:11px !important; font-weight:700 !important; padding:3px 9px !important; border-radius:5px !important; background:#f1f5f9 !important; color:#94a3b8 !important; }

/* ── Panel body ── */
.client-home-panels .panel > .panel-body {
  padding: 16px 20px 16px 24px !important;
}
.client-home-panels .panel > .panel-body p {
  padding: 0 !important; margin-bottom: 10px !important;
  color: #64748b !important; font-size: 14px !important;
}

/* ── Footer panel ── */
.client-home-panels .panel > .panel-footer {
  background: #f8fafc !important;
  border-top: 1px solid #f1f5f9 !important;
  padding: 11px 20px 11px 24px !important;
  border-radius: 0 0 16px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.client-home-panels .panel > .panel-footer a {
  font-size: 12px !important; font-weight: 600 !important; color: #4f46e5 !important;
  text-decoration: none !important; transition: color .13s !important;
}
.client-home-panels .panel > .panel-footer a:hover {
  color: #4338ca !important; text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* ── Animation entrée ── */
@keyframes panelFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.client-home-panels .panel { animation: panelFadeIn .3s ease both; }
.client-home-panels .col-sm-6:first-child .panel:nth-child(1) { animation-delay: .04s; }
.client-home-panels .col-sm-6:first-child .panel:nth-child(2) { animation-delay: .09s; }
.client-home-panels .col-sm-6:last-child  .panel:nth-child(1) { animation-delay: .11s; }
.client-home-panels .col-sm-6:last-child  .panel:nth-child(2) { animation-delay: .16s; }

/* ── MASQUAGE "Voir plus..." footer panel produits ── */
/* Le footer du panel activeproductsservices contient le lien "Voir plus..." */
#activeproductsservices > .panel-footer,
#activeproductsservices .panel-footer,
.client-home-panels .panel[id="activeproductsservices"] > .panel-footer,
.client-home-panels .panel#activeproductsservices .panel-footer {
  display: none !important;
}